import React, { Component, Fragment } from 'react';
import TopNavBar from '@/components/TopNavBar';
import { connect } from 'react-redux';
import * as actions from "@/store/menu/actions"
import Swiper from '@/components/Swiper';
// import { getSwiperListApi } from '@/services/MenuService'
import SearchBtn from '@/components/SearchBtn';
import GoodFood from './GoodFood';
import HotCate from './HotCate';

class Menu extends Component {
  //第一种方式通过react-react 
  componentDidMount(){
    Promise.all([
      this.props.swiper.length === 0 && this.props.getSwiperListAction(),
      this.props.hotcate.length === 0 && this.props.getHotCateListAction(),
      this.props.goodfood.length === 0 && this.props.getGoodFoodListAction(10)
    ]).catch(()=>{console.log("error");})
  }
  

  // 直接异步数据请求调用接口

  // state = {
  //   slideshow:[]
  // }
  // async componentDidMount() {
  //   let res = await getSwiperListApi()
  //   const {code,data} = res || {}
  //   if(code === 0){
  //     this.setState({slideshow:data})
  //   }
  // }
  render() {
    return (
      <Fragment>
        {/* {顶部导航} */}
        <TopNavBar {...this.props}>菜谱大全</TopNavBar>
        {/* 轮播图 */}
        <Swiper data={this.props.swiper}></Swiper>
        {/* 第二种写法的 */}
        {/* <Swiper data={this.state.slideshow}></Swiper> */}
        {/* 搜索框 */}
        <SearchBtn onClick={id=>{this.props.history.push("/search")}}>想吃什么搜索这里：如徽菜</SearchBtn>
        {/* 热门分类 */}
        <HotCate data={this.props.hotcate}></HotCate>
        {/* 精品好菜 */}
        <GoodFood data={this.props.goodfood}></GoodFood>
      </Fragment>
    )
  }
}
export default connect(state =>state.menu.toJS(),actions)(Menu)

